<template>
    <div>
    <div v-show="Notice">
        <el-row :gutter="20" class="main-t">
            <el-col :span="0.5"><div style="height:1rem"></div></el-col>
            <el-col :span="2.5"><div class="one">
                筛选：<el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
         {{message}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">全部类型</el-dropdown-item>
                    <el-dropdown-item command="b">营销物料</el-dropdown-item>
                    <el-dropdown-item command="c">政策发文</el-dropdown-item>
                    <el-dropdown-item command="d">最新通知</el-dropdown-item>
                    <el-dropdown-item command="e">公司制度</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </div></el-col>
            <el-col :span="2.5"><div class="two">
                标签： <el-dropdown @command="handleCommand1">
        <span class="el-dropdown-link">
         {{message1}}<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="f">全部时间</el-dropdown-item>
                    <el-dropdown-item command="g">最近一天</el-dropdown-item>
                    <el-dropdown-item command="h">最近一周</el-dropdown-item>
                    <el-dropdown-item command="i">最近一月</el-dropdown-item>
                    <el-dropdown-item command="j">最近一年</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            </div></el-col>
            <el-col :span="15"><div class="kongbai"></div></el-col>
            <el-col :span="2"><div class="tupian">
                <el-checkbox v-model="checked1" @change="weidu">只显示未读</el-checkbox>
            </div></el-col>
            <el-col :span="0.5"><div style="height:1rem"></div></el-col>
            <!--        <el-col :span="0"><div class="last"></div></el-col>-->
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table
                        ref="multipleTable"
                        :data="istrue?NoticeDada:tableData"
                        tooltip-effect="dark"
                        style="width: 94%;margin: auto"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width
                    >
                    </el-table-column>
                    <el-table-column
                            label="通知标题"
                            style="text-align: left; "
                            width>
                        <template slot-scope="scope" >
                            <a @click="Details(scope.$index, scope.row)" class="biaoti">{{scope.row.tittle}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="fenlei"
                            label="通知分类"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="时间"
                            width="150">
                        <template slot-scope="scope">{{ scope.row.time }}</template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-row :gutter="36" class="main-t elRow">
            <el-col :span="0.5"><div class="el"></div></el-col>
            <el-col :span="22">
                <div class="bottom">
                    <div class="total" ref="multipleTable">
                        <el-checkbox v-model="checked2"   @change="cheak" >
                        </el-checkbox>
                        <a @click="yidu" class="yidu">标为已读</a>
                    </div>
                    <div class="fenye">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="vuexData.length"
                                :page-size="5"
                                :pager-count="7"
                                @current-change="changePage">
                        </el-pagination>
                    </div>
                </div>
            </el-col>
            <el-col :span="1"><div class="el"></div></el-col>
        </el-row>
    </div>
    <div v-show="NoticeDetails" class="main-tt">
        <el-row>
            <el-col :span="24">
                    <div class="notice" :model="ruleForm"  ref="ruleForm">
                        <span class="title" v-model="ruleForm.tittle">{{ruleForm.tittle}}</span>
                        <span class="time" v-model="ruleForm.time">时间:{{ruleForm.time}}</span>
                    </div>
                <div>
                    <div class="p10">
                        <p class="contentp">
                        (一){{list}}
                            <br>
                        (二){{list}}
                        </p>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-button @click="fanhui">返回</el-button>
    </div>
</div>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "Notice",
        data() {
            return {
                ruleForm:{
                    tittle:'',
                    time:'',
                },
               list:"",
                news:'暂无消息',
                time:"time",
                Notice:true,
                NoticeDetails:false,
                checked1:false,
                checked2:false,
                message:'全部类型',
                message1:'全部时间',
                multipleSelection: [],
                tableData: [], //当前页数据
                currentPage:1,
                istrue:true,
                vuexData:[],//vuex里面的数据
            }
        },
        created() {
            this.DataGetNotice().then(res=>{
                // console.log(res)
                this.vuexData = this.$store.state.getNotice.NoticeDada
                this.tableData = this.vuexData.slice(0,5)//初始化，第一页，五条
            })
        },
        computed:{
            NoticeDada(){
                return this.tableData
            },
        },
        methods: {
            ...mapActions(['DataGetNotice','userOperationFun']),
            ...mapGetters(['getNowTime']),
            changePage(val){           //分页
                console.log(val)
                this.currentPage = val
                //this.tableData = []
                let startNum = Number(val-1)*5 //开始
                let endNum =val*5 //结束
                this.tableData = this.vuexData.slice(startNum,endNum)
            },
            handleCommand(command) {     //排序
                if(command==='a'){
                    this.message='全部类型'
                }
                if(command==='b'){
                    this.message='营销物料'
                }
                if(command==='c'){
                    this.message='政策发文'
                }
                if(command==='d'){
                    this.message='最新通知'
                }
                if(command==='e'){
                    this.message='公司制度'
                }
            },
            handleCommand1(command){  //标签
                if(command==='f'){
                    this.message1='全部时间'
                }
                if(command==='g'){
                    this.message1='最近一天'
                }
                if(command==='h'){
                    this.message1='最近一周'
                }
                if(command==='i'){
                    this.message1='最近一月'
                }
                if(command==='j'){
                    this.message1='最近一年'
                }
            },
            Details(index, row){          //查看通知详情
                console.log(index, row)
                this.Notice=false
                this.NoticeDetails=true
                this.ruleForm.tittle=row.tittle
                this.ruleForm.time=row.time
                this.list=row.list
            },
            fanhui(){             //返回通知列表
                this.Notice=true
                this.NoticeDetails=false
            },
            handleSelectionChange(val) {    //改变
                this.multipleSelection = val;
                console.log(this.multipleSelection)
                if(this.multipleSelection.length>0){
                    this.checked2=true
                }else {
                    this.checked2=false
                }

            },
            weidu(val){          //只显示未读
                this.multipleSelection = val;
                console.log(this.multipleSelection)

            },
            cheak(val){            //标为已读
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            yidu(){
                if( this.checked2===true&&this.multipleSelection.length>0){
                    this.$confirm('共'+this.multipleSelection.length+'条通知标记为已读？', '确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                        this.Data.splice(item,this.multipleSelection)
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }).catch(() => {

                    });
                }else {
                    this.$alert('没有选择通知', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
        }
    }
</script>

<style scoped>
    /*!*=====*!下面是通知详情*/
    .main-tt{
        background-color: #FFF;
        padding: 20px 20px 80px;
        min-height: 450px;
        overflow: hidden;
    }
    .notice{
        background-color: #f1f8fb;
        padding: 20px;
        line-height: 25px;
    }
    .title{
        color: #000;
        font-size: 14px;
    }
    .time{
        color: #999;
        line-height: 30px;
        display: block;
    }
    .p10{
        padding: 10px;
    }
    .contentp{
        padding: 10px;
        width: 750px;
       font-size: 12px;
    }
    /*===*/
    .main-t{
        padding: 20px 20px;
        background-color: #FFF;
        font-size: 14px;
    }
    .el-dropdown-link {
        cursor: pointer;

    }
    .el-dropdown-link:hover{
        color: #0591aa;
    }
    .el-icon-arrow-down {
        font-weight:900;
        border:0.01rem solid #cecece;
    }
    .el-dropdown-link:hover .el-icon-arrow-down{
        background-color:#0591aa; ;
        color: white;
    }
    .kongbai{
        height: 1.2rem;
    }
    .tupian i{
        width: 26px;
        height: 26px;
    }
    /*=====*/
    .yidu{
        margin-left: 2rem;
        color: #1596ad;
    }
    .yidu:hover{
        cursor: pointer;
        text-decoration: #1596ad;
        text-decoration:underline;
    }
    .biaoti:hover{
        cursor: pointer;
        color: black;
        text-decoration: black;
        text-decoration:underline;
    }
    /*=========下面是底部*/
    .bottom{
        overflow: hidden;
    }
    .elRow{
        margin: 2rem 0 ;
    }
    .total{
        float: left;
    }
    .fenye{
        text-align: center;
    }
    .el{
        height: 2rem;
    }
    /*=====*/
    .bottom>a{
        display: block;
        width: auto;
        height: 35px;
        line-height: 35px;
        color: #333;
        padding:0.3rem 80px;
        /*padding-left: 80px;*/
        font-size: 14px;
        background: #f3f3f3;
        margin: 1rem auto;
        cursor: pointer;
        text-decoration:none;
    }
    .bottom>a>i{
        color:  rgb(0, 184, 210); ;
    }
    .bottom>a:hover{
        background:  rgb(0, 184, 210);
        color: white;
    }
    .bottom>a:hover  i{
        color: white;
    }
</style>